<template>
  <div>
   <!-- 轮播图 -->
    <div>
      <van-swipe class="my-swipe"
      :autoplay="1000"
      indicator-color="white">
        <van-swipe-item
        v-for="item in srcList"
        :key="item.id"
        >
        <img :src="baseUrl + item.imgSrc" alt="">
      </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 搜索栏 -->
      <van-search
          v-model="searchValue"
          show-action
          placeholder="请输入小区或地址"
          input-align
          background="rgba(0,0,0,0)"
          @search="onSearch"
        >
        <!-- label -->
        <template #label>
          <span>上海</span>
          <span><van-icon name="arrow-down" /></span>
          <b>|</b>
        </template>
        <!-- 右地图 -->
        <template #action>
          <!-- <van-icon name="location-o" size="20px"/> -->
          <i class="iconfont icon-ditu"></i>
        </template>
      </van-search>
      <!-- 租房导航 -->
      <div class="zufang">
        <van-grid clickable>
          <van-grid-item>
            <i class="iconfont icon-fangzi"></i>
            <span>整租</span>
          </van-grid-item>
          <van-grid-item>
            <i class="iconfont icon-duorenyonghu"></i>
            <span>合租</span>
          </van-grid-item>
          <van-grid-item>
            <i class="iconfont icon-ditu"></i>
            <span>地图找房</span>
          </van-grid-item>
          <van-grid-item>
            <i class="iconfont icon-zufang"></i>
            <span>去出租</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 租房小组 -->
      <div class="zfteam">
        <b>租房小组</b>
        <span>更多</span>
      </div>
      <!-- 租房列表 -->
      <div class="zfList">
        <van-grid :column-num="2" direction="horizontal" :gutter="10" clickable>
        <van-grid-item v-for="item in areaId" :key="item.id">
              <div class="fleft">
                <p>{{item.title}}</p>
                <span>{{item.desc}}</span>
              </div>
                <img :src="baseUrl + item.imgSrc" alt="" style="width:50px">
        </van-grid-item>
        </van-grid>

      </div>
  </div>
</template>

<script>
import { swiperApi, groupsApi } from '@/api'
export default {
  data () {
    return {
      searchValue: '',
      baseUrl: 'http://liufusong.top:8080',
      srcList: [],
      areaId: [] // 租房小组
    }
  },
  methods: {
    onSearch () {
      console.log(123)
    }
  },
  async created () {
    // 请求轮播图数据
    const res = await swiperApi()
    // console.log(res)
    this.srcList = res.data.body

    // 请求租房小组数据
    const res2 = await groupsApi({ area: 'AREA|88cff55c-aaa4-e2e0' })
    // console.log(res2)
    this.areaId = res2.data.body
    console.log(this.areaId)
  }
}
</script>

<style scoped lang="less">
 /deep/ .van-search {
    width: 100%;
    position: absolute;
    top: 20px;
  }
  /deep/ .my-swipe {
    position: relative;
    top:0;
    width: 100%;
    img {
      width: 100%;
    }
  }
  span{
    font-size: 14px;
  }
  /deep/.zufang .iconfont {
    font-size: 30px;
    border-radius: 15px;
    padding: 5px;
    background-color: #f2fbf7;
    margin-bottom:8px;
    color:#08b06a;
  }
  .zfteam {
    display: flex;
    justify-content: space-between;
    height:40px;
    line-height: 40px;
    background-color: #f6f5f6;
    padding: 10px;
    b {
      font-size: 16px;
      font-weight: 400;
    }
    span{
      font-size: 14px;
      color: #787d82;
    }
  }
  .zfList {
    background-color: #f6f5f6;
    padding-bottom: 10px;
    .fleft{
      margin-right: 5px;
      p{
      font-size: 14px;
    }
    span{
      font-size: 12px;
    }
    }
  }
</style>
